<template>
        <van-tabbar class="p-b-10 p-t-10"
            v-model="active" 
            @change="changeSwitchTab" 
            inactive-color="#9D9D9D"
            active-color="#5756B3"
            :route="true"
            :fixed="false"
            :safe-area-inset-bottom="true">
            <template v-for="(item,index) in tabBarList" :key="index">
                <van-tabbar-item :to="item.route">
                        <span class="font-12">{{item.name}}</span>
                    <template #icon="props">
                        <img class="image-width-22 m-t-8 m-b-4"
                            :src="props.active ? getImageUrl(item.icon_active) : getImageUrl(item.icon)" />
                    </template>
                </van-tabbar-item>
            </template> 
        </van-tabbar>
</template>
<script lang="ts" setup>
    import { ref,onMounted } from 'vue';
    import store from "../../store/index"
    const active = ref(0);
    //name 为图片的名称 包含 图片后缀
    const getImageUrl = (name:string) => {
        return new URL(`../../assets/tabbar/${name}`, import.meta.url).href;
    }
    const tabBarList = ref([
        {   
            name: '首页',
            icon: 'home.png',
            icon_active:'home-active.png',
            route:'/home'
        },
        {
            name: '分类',
            icon: 'sort.png', 
            icon_active: 'sort-active.png',
            route:'/sort'
        },
        {
            name: '购物车',
            icon: 'shopping-cart.png', 
            icon_active: 'shopping-cart-active.png',
            route:'/shoppingCart'
        },
        {   
            name: '我的',
            icon: 'my.png',
            icon_active: 'my-active.png',
            route:'/my'
        },
    ])
     
    const changeSwitchTab = (index:number) => {
        active.value = index;
    };
</script>
<style lang="scss" scoped>

</style>
